<template>
  <div class="recordDetail">
    <Navbar :appTitle="$route.meta.title" @ClickRight="ClickRight" />
    <!--头部-->
    <van-cell-group>
      <van-cell center>
        <template #title>
          <p class=" ">
            <span
              style="font-size: 0.38rem;
                       font-family: PingFang SC;
                       font-weight: 500;
                       color:#191f25;
                       margin-bottom: 0.16rem;"
              >{{ detailInfo.taskCode || "-" }}</span
            >
          </p>
          <p
            class=""
            style="justify-content: space-between;
                    margin-bottom: 0.23rem;
                    color:#191f25"
          >
            <span></span>业务类型 : {{ detailInfo.typeText || "-" }}
          </p>
          <p
            class=""
            style="justify-content: space-between;
                     margin-bottom: 0.23rem;
                     color:#191f25"
          >
            <span></span>客户 : {{ detailInfo.customerName || "-" }}
          </p>
        </template>
        <!-- 使用默认插槽自定义内容 -->
        <template #default>
          <p class="" style="color:#fe9400;font-size:0.33rem">
            <span></span>待下发拣货:{{
              detailInfo.unPickedDetailsList.length || "0"
            }}
          </p>
          <p
            class=""
            style="color:#4bd863;font-size:0.33rem"
            @click="GoReceiptedGoods(item)"
          >
            已下发拣货:{{ detailInfo.pickedDetailsList.length || "0" }}
          </p>
        </template>
      </van-cell>
    </van-cell-group>
    <div>
      <div
        class="list"
        :style="{
          height:
            detailInfo.outWarehouseType != 0 && detailInfo.outWarehouseType != 1
              ? '71vh'
              : '71vh',
        }"
        v-if="entryDetails && entryDetails.length != 0"
      >
        <div v-for="(item, index) in entryDetails" :key="index" class="wrap">
          <div
            style="margin-bottom: 17px;
                  font-size: 15px;
                  color: black;
                  font-weight: bold;"
          >
            物品明细
          </div>

          <div class="top">
            <div class="icon"></div>
            <div class="title">
              {{ item.goodsCode }} | {{ item.goodsName }}|
              {{ item.goodsSpec }}
            </div>
          </div>
          <div class="center">
            <div>
              <p>
                <span class="key">产地：</span>
                <span class="value">{{ item.address || "-" }}</span>
              </p>
              <p>
                <span class="key">包装规格：</span>
                <span class="value">{{ item.goodsSpec || "-" }}</span>
              </p>
              <p>
                <span class="key">单位：</span>
                <span class="value">{{ item.unitIdText || "-" }}</span>
              </p>
              <p>
                <span class="key">批号：</span>
                <span class="value">{{ item.batchCode || "-" }}</span>
              </p>
              <p>
                <span class="key">生产日期：</span>
                <span class="value">{{ item.produceDate || "-" }}</span>
              </p>
              <p>
                <span class="key">物品数量：</span>
                <span class="value">{{ item.outboundGoodsNum || "-" }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <van-empty v-else description="物品明细为空" />
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import pageList from "@/components/pageList";
import {
  outboundTasksDetail,
  pickingTTasksDetailList,
  formTypeExtendedFieldList,
  outboundTasksdelete,
} from "@/api/mobile";
import store from "@/store";
import { Dialog } from "vant";

export default {
  name: "outboundTasksDetail", //出库任务详情

  components: { Navbar, pageList },
  data() {
    return {
      active: 0,
      detailInfo: {},
      entryDetails: [],
      pickingDetails: [],
      formTypeExtendedFields: [],
    };
  },
  computed: {},
  mounted() {},
  created() {
    store.commit("SET_CURRENT_PREFIX", "/jksaas-produce/produce");
    this.getDetail();
  },
  methods: {
    // btnDelete() {
    //   Dialog.confirm({
    //     title: "确定删除出库任务吗？",
    //     // message:
    //     //   "出库任务删除后，库存会同步增加，出库任务明细会同步删除，删除后不可恢复。",
    //     confirmButtonColor: "#2b85e4",
    //   })
    //     .then(() => {
    //       outboundTasksdelete({ id: this.detailInfo.id }).then((res) => {
    //         if (res.success) {
    //           this.$toast("出库任务删除成功");
    //           this.searchQuery();
    //         } else {
    //           this.$toast(res.message);
    //         }
    //       });
    //     })
    //     .catch(() => {});
    // },

    // btnDetail(e) {
    //   this.$router.push({
    //     title: "编辑出库任务",
    //     path: "/outboundTasksForm",
    //     query: {
    //       id: this.$route.query.id,
    //     },
    //   });
    // },
    // btnConfirm(e) {
    //   this.$router.push({
    //     title: "下发拣货",
    //     path: "/pickingForm",
    //     query: {
    //       id: this.$route.query.id,
    //     },
    //   });
    // },
    // 获取详情相关数据
    async getDetail() {
      let id = this.$route.query.id;
      outboundTasksDetail({ id: id }).then((res) => {
        if (res.code == 200 && res.result) {
          this.detailInfo = res.result;
          this.entryDetails = res.result.detailsList;

          for (const item in this.detailInfo.extDataJson) {
            this.formTypeExtendedFields.map((ele) => {
              if (ele.fieldKey == item) {
                ele.fieldValue = this.detailInfo.extDataJson[item];
              }
            });
          }
          this.detailInfo.extDataJson = this.formTypeExtendedFields;
        } else {
          // this.$toast(res.message);
        }
      });
      pickingTTasksDetailList({ outboundTaskId: id }).then((res) => {
        if (res.code == 200 && res.result) {
          this.pickingDetails = res.result.records;
        } else {
          this.$toast(res.message);
        }
      });
    },
    ClickRight() {
      this.$router.push({
        path: "/application",
      });
    },
    cancel() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 0, taskId: this.$route.query.taskId },
      });
    },
    confirm() {
      // approveType 1:同意 0:拒绝
      this.$router.push({
        path: "/approval",
        query: { approveType: 1, taskId: this.$route.query.taskId },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.recordDetail {
  height: 100vh;
  overflow: hidden;
  .d-head {
    width: 100%;
    padding: 32px;
    background: #ffffff;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        flex: 1;
        .title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 32px;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 20px;
        }
      }
      .right {
        flex: 1;
        .rightImg {
          display: block;
          width: 55px;
          height: 55px;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 32px;
    margin-top: 20px;
    .title {
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 6px;
        height: 28px;
        background: #1890ff;
      }
      .content {
        width: 126px;
        height: 32px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 44px;
        margin-left: 20px;
      }
    }
    .content {
      .row {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 32px;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          width: 500px;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.1rem;
        }
        .rt-column {
          width: 2.55rem;
          //   height: 2.55rem;
          margin-left: 0.2rem;
          .rt-title {
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 0.16rem;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.23rem;
            .column {
              //    border: 1px solid red;
              width: 1.5rem;
              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
              }
              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .search-bottom {
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0 11px;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 500;
    z-index: 9;
    .searchContain {
      .btn {
        display: inline-block;
        box-sizing: border-box;
        width: 124px;
        height: 64px;
        align-items: center;
        border-radius: 6px;
        margin-right: 18px;
        text-align: center;
        line-height: 64px;
      }
      .confirm {
        background: #1890ff;
        color: #ffffff;
      }
      .cancel {
        border: 1px solid #b2b2b2;
        background: #f6f6f6;
        color: #5a5a5a;
      }
    }
  }
}

/deep/.van-tabs__line {
  background-color: rgb(24, 144, 255);
  width: 150px !important;
  transform: translateX(62.5px) translateX(-50%);
  transition-duration: 0.3s;
}
.contentBox {
  margin-top: 1.38rem;
}

.otherMargin {
  height: 0.1rem;
  background: #f5f5f5;
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0.16rem 0.16rem 0 0.06rem;
}
.ExamineBottom {
  height: 0.5rem;
}
.status {
  display: inline-block;
  margin-top: 0.16rem;
  padding: 0.03rem 0.08rem;
  background: #edf6ff;
  border-radius: 0.02rem;
  font-size: 0.11rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3774ac;
}
.list {
  height: 65vh;
  overflow: scroll;
  .wrap {
    background: #fff;
    margin: 24px 0;
    padding: 30px;
    width: 100vw;
    .top {
      display: flex;
      justify-content: flex-start;
      .icon {
        width: 6px;
        height: 36px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }
      .title {
        width: 620px;
        margin-right: 20px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spot img {
        width: 40px;
        height: 40px;
      }
    }
    .center {
      p {
        margin: 16px 25px;
        font-size: 28px;
        display: flex;
        position: relative;
        .key {
          color: #888888;
        }
        .value {
          color: #191f25;
          width: 380px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .arrow {
          color: #1890ff;
          // float: right;
          // margin-right: -0.05rem;
          // display: block;
          position: absolute;
          right: -10px;
        }
      }
      .showAll {
        background: #f5f8ff;
        width: 100vw;
        margin-left: -0.15rem;
        padding: 0.15rem;
        margin-bottom: 0.15rem;
      }
      .fontAno {
        font-size: 30px;
        padding-left: 20px;
      }
    }
    .label {
      margin-left: -0.03rem;
      margin-top: -0.1rem;
      span {
        height: 0.16rem;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 0.1rem;
        padding: 0.03rem 0.08rem;
        font-size: 0.11rem;
        border-radius: 0.03rem;
      }
    }
    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 0.14rem;
      .pictures {
        width: 0.33rem;
        height: 0.33rem;
        line-height: 0.33rem;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 0.06rem;
        font-size: 0.12rem;
        margin-right: 0.1rem;
      }
      .text {
        width: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .opera {
        color: #1890ff;
        font-size: 0.14rem;
      }
    }
  }
}
</style>
